<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>商品信息表</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	<products-com :my-products='products'></products-com>
</div>

<!-- 将点赞的组件模板写到html中 -->
<template id="products-tpl">
	<table :style="tableStyle">
		<caption :style="title">商品信息表</caption>
		<thead>
			<tr :style="bgColor">
				<th :style="tdStyle">编号</th>
				<th :style="tdStyle">品名</th>
				<th :style="tdStyle">单价</th>
				<th :style="tdStyle">数量</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item, key) in myProducts">
				<td :style="tdStyle">{{key}}</td>
				<td :style="tdStyle">{{item.productName}}</td>
				<td :style="tdStyle">{{item.unitPrice}}</td>
				<td :style="tdStyle"><input type="number" class="inline_50" v-model.number="item.quantity"></td>
			</tr>
		</tbody>
		<tfoot>
			<td colspan="3" :style="tdStyle">总计：</td>
			<td :style="tdStyle">{{total}}</td>
		</tfoot>
	</table>
</template>
</body>
<script>
const app = Vue.createApp({
	//实例数据（父组件）
	data(){
		return {
			products:[
				{productName:'苹果笔记本', unitPrice: 18888, quantity: 0},
				{productName:'华为笔记本', unitPrice: 13999, quantity: 0},
				{productName:'小米笔记本', unitPrice: 6888, quantity: 0},
			],
		}
	},
	//局部组件，它从实例（父组件）中接受数据
	components: {
		'products-com': {
			//注意：html属性名不区分大小写，myProducts 会转为 my-products
			props: ['myProducts'],
			
			//自定义样式
			data:function(){
				return {
					tableStyle:{
						borderCollapse: 'collapse',
						border:'1px solid #555',
						width:'460px',
						textAlign:'center',
					},
					tdStyle:{
						border:'1px solid #555',
						padding:'8px',
					},
					bgColor:{
						backgroundColor:'lightblue',
					},
					title:{
						fontSize:'20px',
						marginBottom:'10px',
					}
				}
			},
			
			template: `#products-tpl`,
			
			//计算属性
			computed:{
				total:function(){
					let sum = 0;
					this.myProducts.forEach(function(product){
						sum += product.unitPrice * product.quantity
					})
					return sum;
				}
			}
		}
		
	}
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>